<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>新的模板</title>
        <!-- 引入Vue -->
        <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            
        </div>

        <script type="text/javascript">
            let number = 18;
            let person = {
                name:'张三'
                ,sex:'男'
            }
            Object.defineProperty(person, 'age',{
                // value:18,
                // enumerable:true // 控制属性是否可以枚举, 默认值是false
                // ,writable:true // 控制属性是否可以修改, 默认值是false
                // ,configurable:true // 控制属性是否可以被删除, 默认值是false 
                // 当有人读取preson的age属性时, get函数（getter）就会被调用, 且返回值就是age的值
                get(){
                    console.log('有人读取age属性了')
                    return number
                }
                // 当有人修改preson的age属性时, set函数（setter）就会被调用, 且会收到修改的具体值
                ,set(val){
                    console.log('有人修改了age属性, 值是', val)
                    number = val
                }
            });
            // console.log(Object.keys(person))
            for(let key in person){
                console.log(person[key])
            }

            console.log(person)
        </script>
    </body>
</html>